<template>
	<Page>
		<Topbar active="系统设置" />
		<Content>
			<Panel style="padding: 0 4rem;">
				<view class="tab-demo">
					<Tabs :data="tabs" v-model="active" @click="clickTab">
						<Button small type="primary" @click="logout" :loading="logoutBtnLoading" slot="toolbar">
							退出登录
						</Button>
					</Tabs>
					<FormWrap v-if="active.value==='修改密码'">
						<u--form :labelPosition="labelPosition" :model="model" labelWidth="16rem"
							:labelStyle="{'margin-bottom' : labelPosition === 'top' ? '2rem' : '0'}" style="
                                margin-top: 2rem; padding: 0 5rem;" :rules="rules" ref="uForm">
							<u-form-item label="原密码" prop="formerPassword">
								<InputField v-model="model.formerPassword" type="password" placeholder="请输入密码"
									clearable></InputField>
							</u-form-item>
							<u-form-item label="新密码" prop="password">
								<InputField v-model="model.password" type="password" placeholder="请输入密码" clearable>
								</InputField>
							</u-form-item>
							<u-form-item label="确认新密码" prop="passWordAgain">
								<InputField v-model="model.passWordAgain" type="password" placeholder="请确认新密码"
									clearable></InputField>
							</u-form-item>
							<Button large type="primary" @click="submit" :loading="submitBtnLoading"
								style="margin-top: 4rem; width: 50rem;">
								提交
							</Button>
						</u--form>
					</FormWrap>
					<FormWrap v-if="active.value==='检查更新'">
						<u--form labelPosition="left" labelWidth="12rem" style="
                                padding: 0 5rem;">
							<u-form-item label="当前版本">
								{{ crtVersion }}
							</u-form-item>
							<u-form-item label="最新版本">
								{{ crtVersion === newVersion ? '当前为最新版本' : newVersion }}
							</u-form-item>
							<Button v-if="needUpdate" large type="primary" @click="update" :loading="updateLoading"
								style="margin-top: 4rem; width: 50rem;">
								自动更新
							</Button>
							<Button v-else large type="primary" @click="update" :loading="updateLoading"
								style="margin-top: 4rem; width: 50rem;">
								重新安装
							</Button>
						</u--form>
					</FormWrap>
				</view>
			</Panel>
		</Content>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Tabs from "@/components/tabs/index";
	import Button from "@/components/button/index.vue";
	import FormWrap from '@/components/formWrap/index.vue';
	import InputField from '@/components/formField/inputField/index.vue';
	import InputNumberField from '@/components/formField/inputNumberField/index.vue';
	import {
		downloadFun
	} from '@/utils/download'
	import fetch from "@/utils/fetch";
	import {
		setToken,
		setUserInfo,
		getUserInfo
	} from "@/store/user";
	import {
		toast
	} from "@/utils/toast";

	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			Tabs,
			FormWrap,
			InputField,
			InputNumberField,
			Button,
		},
		data() {
			const that = this;
			return {
				labelPosition: 'top',
				tabs: [{
					label: '修改密码',
					value: '修改密码'
				}, {
					label: '检查更新',
					value: '检查更新'
				}],
				active: {
					label: '修改密码',
					value: '修改密码'
				},
				model: {
					formerPassword: "",
					password: "",
					passWordAgain: "",
				},
				rules: {
					formerPassword: {
						type: "string",
						required: true,
						message: "请填写原密码",
						trigger: ["blur", "change"],
					},
					password: {
						type: "string",
						required: true,
						message: "请填写密码",
						trigger: ["blur", "change"],
					},
					passWordAgain: [{
							type: "string",
							required: true,
							message: "请确认新密码",
							trigger: ["blur", "change"],
						},
						{
							validator: (rule, value, callback) => {
								return value === that.model.password;
							},
							message: "两次密码不一样，请修改！",
						},
					],
				},
				userInfo: {},
				submitBtnLoading: false,
				logoutBtnLoading: false,
				updateLoading: false,
				crtVersion: '',
				newVersion: '',
				needUpdate: false
			};
		},
		onReady() {
			this.userInfo = getUserInfo();
		},
		methods: {
			clickTab(tab) {
				if (tab.value === '检查更新')
					this.checkVersion();
			},
			submit() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						fetch("post", "/basic/user/updatePwd", {
							newPwd: this.model.password,
							oldPwd: this.model.formerPassword,
						}).then((res) => {
							this.submitBtnLoading = true;
							this.$toast('修改密码成功，请重新登录！', () => {
								this.submitBtnLoading = false;
								uni.redirectTo({
									url: '/pages/login/index'
								});
							});
						});
					})
					.catch((errors) => {
						uni.$toast("校验失败，请重新输入");
					});
			},
			logout() {
				this.logoutBtnLoading = true;
				this.$toast('退出登录成功!', () => {
					this.logoutBtnLoading = false;
					uni.redirectTo({
						url: '/pages/login/index'
					});
				});
			},
			checkVersion() {
				// APP 强制更新
				// #ifdef APP-PLUS
				const app = uni.getSystemInfoSync();
				fetch('get', '/basic/sys/getMobileVersion?type=pad', {}, {}, {}, false).then(res => {
					this.crtVersion = app.appWgtVersion;
					this.newVersion = res.version;
					this.needUpdate = res.version !== app.appWgtVersion;
				})
				// #endif
			},
			update() {
				if (this.updateLoading) return;
				this.updateLoading = true;
				downloadFun('/static/file/apk/pad/pad.apk', () => {
					this.updateLoading = false;
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.tab-demo {
		flex: 1;
		width: 100%;
		font-size: 2rem;
	}
</style>